import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../common/models/index.dart';
import '../../../common/widgets/index.dart';
import 'controller.dart';

/// 活动管理页面
class ActivityManagePage extends GetView<ActivityManageController> {
  const ActivityManagePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFD84545),
      appBar: AppBar(
        leading: IconButton(
          onPressed: () => Get.back(),
          icon: const Icon(Icons.arrow_back_ios_new_outlined),
        ),
        title: Obx(() => Text(
          controller.activityTitle.value,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 17,
            fontWeight: FontWeight.w600,
          ),
        )),
        backgroundColor: const Color(0xFFD84545),
        elevation: 0,
        centerTitle: true,
        iconTheme: const IconThemeData(color: Colors.white),
      ),
      body: Obx(() {
        // 加载状态
        if (controller.isLoadingParticipants.value && controller.participants.isEmpty) {
          return _buildLoadingState();
        }
        
        return _buildContent();
      }),
    );
  }

  /// 构建加载状态
  Widget _buildLoadingState() {
    return const Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
      ),
    );
  }

  /// 构建主内容
  Widget _buildContent() {
    return Container(
      margin: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.06),
            blurRadius: 12,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 🔥 标题（优化样式）
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              children: [
                // 图标容器（使用中性灰色）
                Container(
                  padding: const EdgeInsets.all(8),
                  decoration: BoxDecoration(
                    color: const Color(0xFFF5F5F5),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: const Icon(
                    Icons.people_rounded,
                    color: Color(0xFF666666),
                    size: 20,
                  ),
                ),
                const SizedBox(width: 12),
                const Text(
                  '参与者管理',
                  style: TextStyle(
                    fontSize: 17,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF333333),
                  ),
                ),
                const Spacer(),
                // 🔥 参与者数量徽章
                Obx(() {
                  if (controller.isEmpty.value) return const SizedBox.shrink();
                  return Container(
                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                    decoration: BoxDecoration(
                      gradient: const LinearGradient(
                        colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                      ),
                      borderRadius: BorderRadius.circular(12),
                    ),
                    child: Text(
                      '${controller.participants.length}',
                      style: const TextStyle(
                        fontSize: 13,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  );
                }),
              ],
            ),
          ),
          
          const Divider(height: 1, color: Color(0xFFF0F0F0)),
          
          // 参与者列表
          Expanded(
            child: Obx(() {
              if (controller.isEmpty.value) {
                return _buildEmptyState();
              }
              
              return _buildParticipantsList();
            }),
          ),
        ],
      ),
    );
  }

  /// 构建空状态
  Widget _buildEmptyState() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 空状态图标
          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
              color: const Color(0xFFF8F9FA),
              shape: BoxShape.circle,
            ),
            child: const Icon(
              Icons.people_outline_rounded,
              size: 48,
              color: Color(0xFFBDBDBD),
            ),
          ),
          const SizedBox(height: 20),
          // 主标题
          const Text(
            '暂无参与者',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
              color: Color(0xFF666666),
            ),
          ),
          const SizedBox(height: 8),
          // 副标题
          Text(
            '等待用户加入活动',
            style: TextStyle(
              fontSize: 14,
              color: Colors.grey[400],
            ),
          ),
        ],
      ),
    );
  }

  /// 构建参与者列表
  Widget _buildParticipantsList() {
    return RefreshIndicator(
      color: const Color(0xFFD84545),
      onRefresh: controller.loadParticipants,
      child: GridView.builder(
        padding: const EdgeInsets.all(16),
        clipBehavior: Clip.none, // 🔥 允许子元素超出边界
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          childAspectRatio: 0.8, // 稍微增高一点，给删除按钮留空间
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
        ),
        itemCount: controller.participants.length,
        itemBuilder: (context, index) {
          final participant = controller.participants[index];
          return _buildParticipantItem(participant);
        },
      ),
    );
  }

  /// 构建参与者项
  Widget _buildParticipantItem(ActivityParticipantData participant) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 头像 + 删除按钮
        Stack(
          clipBehavior: Clip.none, // 🔥 关键修复：允许子元素超出边界
          children: [
            // 头像圆形（带阴影）
            Container(
              width: 70,
              height: 70,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.grey[200],
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.08),
                    blurRadius: 8,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: ClipOval(
                child: CachedAvatar(
                  avatarUrl: participant.userAvatarUrl ?? '',
                  size: 70,
                ),
              ),
            ),
            
            // 🔥 删除按钮（优化样式）
            Positioned(
              top: -4,
              right: -4,
              child: GestureDetector(
                onTap: () => controller.showRemoveDialog(
                  participant.userId,
                  participant.userName,
                ),
                child: Container(
                  width: 24,
                  height: 24,
                  decoration: BoxDecoration(
                    gradient: const LinearGradient(
                      colors: [Color(0xFFFF6B6B), Color(0xFFD84545)],
                    ),
                    shape: BoxShape.circle,
                    border: Border.all(
                      color: Colors.white,
                      width: 2,
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: const Color(0xFFD84545).withValues(alpha: 0.4),
                        blurRadius: 6,
                        offset: const Offset(0, 2),
                      ),
                    ],
                  ),
                  child: const Icon(
                    Icons.close_rounded,
                    color: Colors.white,
                    size: 14,
                  ),
                ),
              ),
            ),
          ],
        ),
        
        const SizedBox(height: 8),
        
        // 用户名
        Text(
          participant.userName,
          style: const TextStyle(
            fontSize: 13,
            color: Color(0xFF333333),
            fontWeight: FontWeight.w600,
          ),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

